<template>
  <div class="cloud-service">

    <table class="oem-table">
      <tr>
        <td class="td-title" width="200">
          友情链接
        </td>
        <td>
          <ul class="link-list">
            <li v-for="i in 5" :key="i">
              <div class="order">{{i}}</div>
              <div class="linkUrl">
                <span v-if="isModify">
                  <Input value="http://www.baidu.com"/>
                </span>
                <span v-else>http://www.baidu.com</span>
              </div>
              <div class="linkName">百度</div>
            </li>
          </ul>
        </td>
        <td width="80 text-center">
          <Icon type="ios-create c5" size="20" @click="modify(1)"  v-if="!isModify"/>
          <Icon type="ios-cash c4" size="20" @click="modify(0)" v-else />
        </td>
      </tr>
      <tr>
        <td class="td-title">
          服务热线
        </td>
        <td>

        </td>
        <td width="80 text-center"><Icon type="ios-create c5" size="20" @click="gotoDetail(row)" /></td>
      </tr>
      <tr>
        <td class="td-title">
          备案信息
        </td>
        <td></td>
        <td width="80 text-center"><Icon type="ios-create c5" size="20" @click="gotoDetail(row)" /></td>
      <tr>
        <td class="td-title">
          技术支持
        </td>
        <td>

        </td>
        <td width="80 text-center"><Icon type="ios-create c5" size="20" @click="gotoDetail(row)" /></td>
      </tr>

    </table>

  </div>
</template>

<script>
  export default {
    mounted() {
      this.$store.commit('UPDATE_POSITION', this.position)
    },
    data() {
      return {
        isModify: false,
        position: [{
            title: '代理商管理',
            link: '/admin/agent'
          },
          {
            title: 'OEM配置'
          }
        ],
      }
    },
    methods: {
      modify (is) {
        this.isModify= is > 0
      }
    }
  }
</script>

<style lang="less" scoped>
  .oem-table {
    width: 100%;
    border-collapse: collapse;
    
    td {
      padding: 14px;
      border:1px solid #eee;
    }

    .td-title {
      background: #f2f3f4;
    }
  }
  .link-list{
    li{
       display: flex;
       line-height: 36px;
       justify-content: space-between;
       text-align: center;
    }
    
    div{
      border:1px solid #eee;
      margin-top:-1px;
      margin-left:-1px;
    }
    .order{
      flex: 1;
    }
    .linkUrl{
      flex: 6;
    }
    .linkName{
      flex: 4;
    }
  }
</style>
